require("../css/player.less")
document.ready(function () {
    // 获取dom
    let video = document.querySelector("#video")
    let currentPart = document.querySelector("#currentPart")
    let countPart = document.querySelector("#countPart")
    let title = document.querySelector("#title")
    let prevBtn = document.querySelector("#prevBtn")
    let pauseBtn = document.querySelector("#pauseBtn")
    let nextBtn = document.querySelector("#nextBtn")
    let mask = document.querySelector("#mask")
    let continuePlay = document.querySelector("#continuePlay")
    let stopPlay = document.querySelector("#stopPlay")
    let progress = document.querySelector("#progress")
    let currentImg = document.querySelector("#currentImg")
    let curTitle = document.querySelector("#curTitle")

    let timeArr=[]
    let timer = null
    let index = 0
    let user =JSON.parse(localStorage.getItem("user"))
    console.log(user);
    let courseId=parseInt(localStorage.getItem("courseId"))
    // console.log(courseId);
    let fragArr = JSON.parse(localStorage.getItem("fragments"))
    // console.log(fragArr);
    playVideo()
    //封装播放视频
    function playVideo() {
        video.src = window.$utils.url + fragArr[index].videoUrl
        video.load()
        video.play()
        currentPart.textContent = index + 1
        countPart.textContent = fragArr.length
        title.textContent = fragArr[index].title
    }
    // 上一个
    prevBtn.addEventListener("click", function () {
        index--
        if (index < 0) {
            index = 0
        }
        playVideo()
    })
    // 下一个
    nextBtn.addEventListener("click", function () {
        index++
        if (index == fragArr.length) {
            index = fragArr.length - 1
        }
        playVideo()
    })
    // 暂停按钮
    pauseBtn.addEventListener("click", function () {
        video.pause()
        mask.style.display = "block"
        currentImg.src = window.$utils.url + fragArr[index].imgUrl
        curTitle.textContent = fragArr[index].title
    })
    // 视频结束
    video.addEventListener("ended", function () {
        progress.style.width = "100%"
        clearInterval(timer)
        index++
        console.log(index);
        if (index < fragArr.length) {
            playVideo()
        } else {
            index = fragArr.length - 1
            mask.style.display = "block"
            pauseBtn.click()
        }
    })
    // 视频暂停
    video.addEventListener("pause", function () {
        clearInterval(timer)
    })
    // 视频播放  进度条
    video.addEventListener("play", function () {
        let screenWidth = document.body.clientWidth
        clearInterval(timer)
        timer = setInterval(function () {
            console.log("--------");
            // 当前时间
            let curTime = video.currentTime
            //总时间
            let countTime = video.duration;
            // console.log("当前时间:", curTime, "总时间", countTime);
            timeArr[index]=curTime
            console.log("当前时间:",curTime,"总时间:",countTime,"存的时间:",timeArr);
            progress.style.width = curTime / countTime * screenWidth + "px"
        }, 100)
    })
    // 继续训练
    continuePlay.addEventListener("click", function () {
        mask.style.display = "none"
        video.play()
    })
    // 结束训练
    stopPlay.addEventListener("click", function () {
        // location.href="./course.html"
        let sumTime=null
        timeArr.forEach(function(item){
            sumTime+=item
        })
        console.log("总时间:",sumTime);
        axios.post(window.$utils.url + "/sports/saveTrain", {
            "id": courseId,
            "userId": user.userId,
            "takeTime": sumTime,
            "calorie": sumTime*1.2
        })
            .then(function (res) {
                console.log(res.data);
                if (res.data.status==0) {
                    window.$utils.toast("success","保存成功")
                    setTimeout(function(){
                        location.href="./course.html"
                    },3000)
                }else{
                    window.$utils.toast("fail", "保存失败")
                }
            })
            .catch(function (err) {
                console.log(err);
            })
    })

})